<template>
  <h1>减脂记录单</h1>
  <div>
    <div class="recordWeight">
      <div>输入您的体重：</div>
      <div><el-input v-model="weight" placeholder="请输入您的体重" clearable/></div>
      <el-button @click="search">查询</el-button>
    </div>
    <h3>目前比例：外胚型： 碳水{{ standard.carbs }}  脂肪{{ standard.fat }}  蛋白质{{ standard.protein }}</h3>
    <div>
      <h3>高碳日</h3>
      <div class="recordWeight">
        <div>碳水:</div>
        <div>{{ carbs.high || 0 }}g</div>
      </div>
        <div class="recordWeight">
          <div>脂肪:</div>
          <div>{{ fat.high || 0 }}g</div>
      </div>
        <div class="recordWeight">
          <div>蛋白质:</div>
          <div>{{ protein || 0 }}g</div>
      </div>
      <h3>中碳日</h3>
      <div class="recordWeight">
        <div>碳水:</div>
        <div>{{ carbs.middle || 0 }}g</div>
      </div>
        <div class="recordWeight">
          <div>脂肪:</div>
          <div>{{ fat.middle || 0 }}g</div>
      </div>
        <div class="recordWeight">
          <div>蛋白质:</div>
          <div>{{ protein || 0 }}g</div>
      </div>
      <h3>低碳日</h3>
      <div class="recordWeight">
        <div>碳水:</div>
        <div>{{ carbs.low || 0 }}g</div>
      </div>
        <div class="recordWeight">
          <div>脂肪:</div>
          <div>{{ fat.low || 0 }}g</div>
      </div>
        <div class="recordWeight">
          <div>蛋白质:</div>
          <div>{{ protein || 0 }}g</div>
      </div>
    </div>
  </div>
    
</template>

<script setup>
import { reactive, ref } from "vue"
const weight = ref('')
const standard = reactive({
  carbs: 2.5, // 碳水
  fat: 0.9, // 脂肪
  protein: 1.3 // protein
})
const carbs = ref({})
const fat = ref({})
const protein = ref(0)


const countCarbs = (weight) => {
  let week = standard.carbs * weight * 7
  const high = Number((week * 0.5) / 2 ).toFixed(1)
  const middle = Number((week * 0.35) / 3).toFixed(1)
  const low = Number((week * 0.15) / 2 ).toFixed(1)
  return {
    high,
    middle,
    low
  }
}
const countFat = (weight) => {
  let week = standard.fat * weight * 7
  const high = Number((week * 0.15) / 2).toFixed(1)
  const middle = Number((week * 0.35) / 3).toFixed(1)
  const low = Number((week * 0.5) / 2 ).toFixed(1)
  return {
    high,
    middle,
    low
  }

}
const countProtein = (weight) => {
  let res1 = weight * 1
  let res2 = Number(weight * 1.5).toFixed(1)
  return res1 + '~' +res2
}

const search = () => {
  carbs.value = countCarbs(weight.value)
  fat.value = countFat(weight.value)
  protein.value = countProtein(weight.value)
}

</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.recordWeight {
  display: flex;
}
</style>
